<template>
  <div>
    <div id="top" class="backTop" @click="BackTop()" v-show="flag"></div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                flag: false
            }
        },
        methods: {
            BackTop() {
                // 页面pc端滚动
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });
                // 移动端滚动
                let timer = setInterval(() => {
                        document.body.scrollTop -= 50;
                        if (document.body.scrollTop <= 0) {
                            clearInterval(timer)
                        }
                    }, 10)
                    // 导航动画
                let strat = -60;
                let end = 0;
                let nav = document.querySelector('.common-header');
                nav = document.querySelector('.common-header');
                let pos = nav.getAttribute('style')
                let position = pos.split("top:").join("").split("px").join("")
                if (parseInt(position) == -60) {
                    let timer = setInterval(() => {
                        nav.setAttribute('style', 'top:' + strat + 'px')
                        strat += 2;
                        if (strat > end) {
                            // 清空定时器
                            clearInterval(timer)
                        }
                    }, 8)
                }
            },
        },
        mounted() {
            window.addEventListener('scroll', (() => {
                if (document.body.scrollTop >= 100 || window.pageYOffset >= 100 || document.documentElement.scrollTop >= 100) {
                    this.flag = true;
                } else {
                    this.flag = false
                }
            }), true)
        }
    }
</script>
<style lang="less">
    .backTop {
        position: fixed;
        right: 50px;
        bottom: 100px;
        cursor: pointer;
        width: 50px;
        height: 50px;
        background: url('~@/assets/img/rocket.png');
        background-size: 50px;
        z-index: 10;
    }
</style>